<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
  </head>
  <body>
    <header style="border-bottom:1px solid #ddd;padding:5px 0; color:#777">
      <div class="container">
        <div class="pull-left">
          <span><small>欢迎来到网站</small></span>
        </div>
        <div class="pull-right">
          <span style="color:red"><small>保存到桌面</small></span>
        </div>
      </div>
    </header>
    <nav class="navbar navbar-default navbar-static-top" id="navbar" role="navigation" >
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">CDING</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">电视剧</a></li>
            <li><a href="#">预告片</a></li>
            <li><a href="#">影视短片</a></li>
            <li><a href="#">交流片</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" id="" data-toggle="dropdown">
                排行榜
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="">
                <li><a href="#">豆瓣</a></li>
                <li><a href="#">其他</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-primary">搜索</button>
          </form>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
      <div class="alert alert-success" style="padding:8px;border:2px dashed #ccc">这里是公告</div>
    </div>
    <section>
      <div class="container">
        <div class="jumbotron">
          <h1>Hello, world!</h1>
          <p></p>
        </div>
      </div>

      <div class="jumbotron">
        <div class="container">
          nohaoa
        </div>
        <h1>Hello, world!</h1>
        <p></p>
      </div>
      <div class="alert alert-success">
        dasdasd<a href="#" class="alert-link">dasddsad</a>
      </div>
    </section>
    <!-- <section>
      <div class="container">
        <div class="" style="height:1000px">
          <span class="label label-default">default</span>
          <span class="badge">4</span>
        </div>
        <div class="">
          dasdas
        </div>
      </div>
    </section> -->
    

    <script type="text/javascript">
        //获取dom元素到窗口的高度
        function getElementToPageTop(el) {
          if(el.parentElement) {
            return this.getElementToPageTop(el.parentElement) + el.offsetTop
          }
          return el.offsetTop
        }
        //鼠标滚动事件
        //$(window).scroll() 获取滚动条滚了多少像素
        window.onscroll = function(e)
        {
          let navbar = document.getElementById("navbar");
          let toTopLength = getElementToPageTop(navbar);
          if($(window).scrollTop()>toTopLength){
            navbar.classList.remove('navbar-static-top');
            navbar.classList.add('navbar-fixed-top');
            // navbar.nextElementSibling.style.marginTop += navbar.style.height;
            console.log(navbar.style)
            let marginTop = $(navbar).outerHeight();
            navbar.nextElementSibling.style.marginTop = marginTop+'px';
          }else{
            navbar.classList.add('navbar-static-top');
            navbar.classList.remove('navbar-fixed-top');
            navbar.nextElementSibling.style.marginTop = 0+'px';
          }
        }

    </script>

  </body>
</html>
